<template>
    <section class="page-container-list">
        <DetailsHeader title="充值" class="mb-24" />
        <div class="tabs-list-wrap">
            <div class="tabs-list">
            <div class="tab" @click="activeKey = 1" :class="{ activeTab: activeKey == 1 }">在线充值</div>
            <div class="tab" @click="activeKey = 2" :class="{ activeTab: activeKey == 2 }">对公汇款</div>
        </div>
        </div>
       
        <OnlineRecharge v-show="activeKey == 1" />
        <CorporateRemittance v-show="activeKey == 2" />

    </section>
</template>

<script setup name="Recharge">
import { ref } from 'vue'
import OnlineRecharge from './components/OnlineRecharge.vue'
import CorporateRemittance from './components/CorporateRemittance.vue'
const activeKey = ref('1')

</script>

<style scoped lang="scss">
.page-container-list {

}

.tabs-list-wrap {
    background: #fff;
    padding: 24px 24px 0 24px;
}
.tabs-list {
    width: 325px;
    height: 46px;
    display: flex;
    border-bottom: 1px solid #E8E8E8;
    .tab {
        color: #223354;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 46px;
        padding: 0 16px;
        margin-right: 24px;
        /* 137.5% */
    }

    .activeTab {
        color: #07F;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        position: relative;
    }

    .activeTab::after {
        position: absolute;
        bottom: 0;
        left:8px;
        width: 86px;
        height: 2px;
        content: "";
        background: #07F;
    }
}
</style>
